<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="80px" label-position="right"  :rules="rules">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="班级名称" prop="schoolId">
                            <el-select v-model="query.classId" placeholder="请选择" style="width:100%" >
                                <el-option v-for="item in classData" :key="item.pId" :label="item.sNickName" :value="item.pId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="query.phone" placeholder="请输入内容" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div class="btn-float">
                            <el-button type="primary" class="top-btn" @click="searchData('query')">查询</el-button>
                        </div>
                    </el-col>
                </el-row>
               
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="batchOpen">一键开通</el-button>
                </div>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" label="全选" align="center" :selectable="isChecked"></el-table-column>
                <!-- <el-table-column label="经销商名称">
                    <template scope="scope">
                        <span>{{scope.row.agentName}}</span>
                    </template>
                </el-table-column> -->
    
                <el-table-column label="学校名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.schoolName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.serviceName | isNull }}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="卡券码" width="160" align="center">
                    <template scope="scope">
                        <span>{{scope.row.fCardCoupons | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="持有人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sUsername | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="手机号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.phone | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="所在班级" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sClassname | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="使用状态" align="center">
                    <template scope="scope">
                        <span v-if=" scope.row.sStatus=='0' ">未使用</span>
                        <span v-else >已使用</span>
                    </template>
                </el-table-column>

                <el-table-column label="发放时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.openTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="发放批次" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sBatchNumber | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="开通时长" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sUsefulLife | isNull}}个月</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作"  width="130">
                    <template scope="scope">
                        <span v-if="scope.row.sStatus=='1'" >不可操作</span>
                        <el-button type="text" v-if="scope.row.sStatus=='0'" class="btn-success" @click="cancelRecord(scope.row.pId)">撤回</el-button>
                        <el-button type="text" v-if="scope.row.sStatus=='0'" class="btn-success" @click="openRecord(scope.row.pId)">开通</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" 
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

    </div>
</template>

<script>
    // import validate from '@/utils/validate';
    import validate from '@/utils/validate';
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import { queryClassBySchool} from 'api/deviceManagement';
    import {pageCardCouponsExtendDetail, cancelCardCoupons, openServiceByCardId } from 'api/cardCoupons'; 
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'extendCheckList',
        components: { Levelbar, TableLayout },
        data() {
            return { 
                classData: [],
                loading: true,  
                tableData: [],
                pageQuery: {
                    page: 1,
                    total: 0
                },
                query: {
                    classId: '',
                    phone: ''
                },
                multipleSelection: [], // 全选
                rules: {
                    phone: [
                        ...validate.phone()
                    ]
                }
            }
        },
        created() {
            this.queryData();
            this.queryClass();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSelectionChange(val) {
                // console.log('val', val);
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.pageQuery.page = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.page = val;
                this.queryData();
            },
            searchData(ruleForm) {   // 添加表单验证 by cuihd 20180123           
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.queryData();
                    } else {
                        return false;
                    }
                });
            },
            queryClass() {               
                queryClassBySchool(this.$route.params.schoolId).then(response => {
                    this.classData = response.data.content;
                    this.classData.unshift({
                        pId: '',
                        sNickName: '请选择'
                    });
                })
            },
            queryData() {
                this.tableData= [];
                this.loading = true;
                pageCardCouponsExtendDetail(
                    this.pageQuery.page, 
                    this.config.pageSize,
                    this.$route.params.id,
                    this.query.classId,
                    this.query.phone).then(response => {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                        this.loading = false;
                    });
            },
            cancelRecord(pid) {
                this.$confirm('确定撤回该张卡券吗？', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    cancelCardCoupons(pid).then(response => {
                        this.queryData();
                        this.$message({
                            type: 'success',
                            message: '撤销成功'
                        }); 
                    }) 

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消撤销'
                    });          
                });
            },
            openRecord(pid) {
                console.log('pid', pid);
                this.$confirm('确定开通该张卡券吗？', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    let pidList = [];
                    pidList.push(pid); 
                    this.open(pidList);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消开通'
                    });          
                });
            },

            // 一键开通
            batchOpen() {
                if (this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'error',
                        message: '请选择需要开通的卡券'
                    });
                } else {
                    this.$confirm('是否确认开通？', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        let pidList = [];
                        for (let i = 0 ; i < this.multipleSelection.length ; i++) {
                            pidList.push(this.multipleSelection[i].pId);
                        }
                     // 调用接口
                        this.open(pidList);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消开通'
                        });          
                    });
                }
            },

            // 判断是否可选
            isChecked(row) {
                return row.sStatus !== '1' ; // !== '1' 的时候为可选
            },

            // 开通
            open(list) {
                openServiceByCardId(list).then(response => {
                    // console.log('一键开通', res);
                    if (response.data.content.length == 0) {
                        this.$message({
                            type: 'success',
                            message: response.data.errorMsg
                        });
                    } else {
                        let name = response.data.content.join('，');
                        this.$message({
                            type: 'error',
                            message: name +'开通失败'
                        });
                    }         
                    this.queryData();
                })
            }

        }

    }
</script>

<style lang="scss" scoped>
.btn-float{
    float:right;
}

</style>

